<template>
  <div>
    <el-checkbox v-model="checked" true-label="北京" disabled>北京</el-checkbox>
    <el-checkbox @change="aa" v-model="checked" border checked true-label="上海">上海</el-checkbox>
    <el-checkbox @change="aa" v-model="checked" border true-label="广州">广州</el-checkbox>
    <el-checkbox @change="aa" v-model="checked" border true-label="深圳">深圳</el-checkbox>
    <h1>多选框组</h1>
    <el-checkbox-group v-model="checkList" @change="bb">
        <el-checkbox label="复选框 A" border ></el-checkbox>
        <el-checkbox label="复选框 B" border ></el-checkbox>
        <el-checkbox label="复选框 C" border ></el-checkbox>
        <el-checkbox label="禁用" disabled ></el-checkbox>
        <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>
    <h1>按钮样式</h1>
    <div>
        <el-checkbox-group v-model="checkboxGroup1" @change="cc">
          <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div style="margin-top: 20px">
          <el-checkbox-group v-model="checkboxGroup2" size="medium" @change="cc">
            <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
          </el-checkbox-group>
        </div>
      <div style="margin-top: 20px">
        <el-checkbox-group v-model="checkboxGroup3" size="small" @change="cc">
          <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div style="margin-top: 20px">
        <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled @change="cc">
          <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
        </el-checkbox-group>
      </div>
  </div>
</template>

<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    name: "Checkbox",
    data() {
      return {
          checked: "北京",
          checkList: [],
          checkboxGroup1: ['上海'],
          checkboxGroup2: ['上海'],
          checkboxGroup3: ['上海'],
          checkboxGroup4: ['上海'],
          cities: cityOptions
        };
      },
    methods:{
          aa(){
               console.log(this.checked);
            },
          bb(){
               console.log(this.checkList);
          },
          cc(){
             console.log(this.checkboxGroup1);
          }
      }
  }
</script>

<style>
</style>
